import React from 'react';
import { connect } from 'umi';
import { Collapse, Divider, Row, Spin } from 'antd';

import UpdateExpertsCardBaseInfo from './UpdateExpertsCardBaseInfo';
import UpdateExpertsForm from './UpdateExpertsForm';
import UpdateExpertsFormBaseInfo from './UpdateExpertsFormBaseInfo';
import UpdateExpertsFormBaseInfoView from './UpdateExpertsFormBaseInfoView';
import UpdateExpertsFormDocumentInfo from './UpdateExpertsFormDocumentInfo';
import UpdateExpertsFormDocumentInfoView from './UpdateExpertsFormDocumentInfoView';
import UpdateExpertsFormOtherInfoView from './UpdateExpertsFormOtherInfoView';
import UpdateExpertsFormOtherInfo from './UpdateExpertsFormOtherInfo';

import '../common/updateStyle.less';
import { ExpertsUpdateContext } from '../common/ExpertsContext';
import { useExpertsUpdateReducer } from '../common/ExpertsReducer';
import { useExpertsUpdate } from '../common/useExpertsUpdate';
import UpdateExpertsFormPhoneInfoView from './UpdateExpertsFormPhoneInfoView';
import UpdateExpertsFormPhoneInfo from './UpdateExpertsFormPhoneInfo';

// import UpdateExpertsFormPhoneInfo from './UpdateExpertsFormPhoneInfo';
// import UpdateExpertsFormPhoneInfoView from './UpdateExpertsFormPhoneInfoView';
// import UpdateExpertsCertificateInfo from './UpdateExpertsCertificateInfo';
// import UpdateExpertsCardDocumentInfo from './UpdateExpertsCardDocumentInfo';
// import UpdateExpertsCertificateInfoModal from './UpdateExpertsCertificateInfoModal';
// import CustomPaging from '@/components/CustomPaging/index';

const { Panel } = Collapse;
const prefixCls = 'experts-update-';
const UpdateView: React.FC<ExpertsUpdateAPI.IExpertsUpdateView> = ({ curRes, locationProps }) => {
  const { activeKey, activeKeys, dispatch, expertsInfo, expertQualifies } = useExpertsUpdateReducer();
  const {
    title,
    isView,
    baseInfoForm,
    findExpertsLoading,
    baseInfoSubmit,
    // current,
    // changeCurrent,
    // certificateInfoSubmit,
    // certificateInfoForm,
    // certificateStatus,
    // onChangeExpertsCertificateInfoState,
  } = useExpertsUpdate({ locationProps, expertsInfo, dispatch, expertQualifies });

  return (
    <ExpertsUpdateContext.Provider value={{ prefixCls, activeKey, activeKeys, isView, expertsInfo, expertQualifies, curRes, locationProps, dispatch }}>
      <Spin spinning={findExpertsLoading}>
        <Row className={`${prefixCls}row`}>
          <UpdateExpertsCardBaseInfo title={title} onSubmit={baseInfoSubmit}>
            <UpdateExpertsForm form={baseInfoForm} isView={isView}>
              <Panel header={<Divider orientation="left">基本信息</Divider>} key={'baseInfo'}>
                {isView ? <UpdateExpertsFormBaseInfoView /> : <UpdateExpertsFormBaseInfo form={baseInfoForm} />}
              </Panel>
              <Panel header={<Divider orientation="left">证件与账户信息</Divider>} key={'documentInfo'}>
                {isView ? <UpdateExpertsFormDocumentInfoView /> : <UpdateExpertsFormDocumentInfo />}
              </Panel>
              <Panel header={<Divider orientation="left">专业信息</Divider>} key={'phoneInfo'}>
                {isView ? <UpdateExpertsFormPhoneInfoView /> : <UpdateExpertsFormPhoneInfo />}
              </Panel>
              <Panel header={<Divider orientation="left">其他信息</Divider>} key={'otherInfo'}>
                {isView ? <UpdateExpertsFormOtherInfoView /> : <UpdateExpertsFormOtherInfo />}
              </Panel>
            </UpdateExpertsForm>
          </UpdateExpertsCardBaseInfo>
          {/* <UpdateExpertsCardDocumentInfo onExtra={onChangeExpertsCertificateInfoState}>
            {expertQualifies?.length > 0 ? (
              <>
                <CustomPaging
                  current={current}
                  total={expertQualifies?.length}
                  onChange={(operate) => {
                    changeCurrent(operate);
                  }}
                />
                <UpdateExpertsCertificateInfo infoData={expertQualifies[current - 1]} />
              </>
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
            {certificateStatus.state && (
              <UpdateExpertsCertificateInfoModal
                current={current}
                state={certificateStatus}
                form={certificateInfoForm}
                onSubmit={certificateInfoSubmit}
                onClose={onChangeExpertsCertificateInfoState}
              />
            )}
          </UpdateExpertsCardDocumentInfo> */}
        </Row>
      </Spin>
    </ExpertsUpdateContext.Provider>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(UpdateView);
